<template>
	<view class="baseView" style="">
		<!-- 发布成功 -->
		<view v-if="sharePush=='0'" class="" >
			<!--  -->
			<view class="" style="padding: 0px 20px;">
				<view class="topView row-lineConter" style="margin-bottom: 10px;">
					<uni-icons type="info" size="18" color="rgb(224, 168, 99)"></uni-icons>

					<view style="margin-left: 10rpx;">
						{{explain}}
					</view>
				</view>
				<!--  -->
				<view class="bordered-view">
					<view class="blockTextColor" style="font-size: 15px; font-weight: bold;">
						分享朋友圈效果
					</view>
					<view class="row-lineConter ">
						<image :src="exampleImageUrl1" style="flex-grow: 1;height: 50px;" mode=""></image>
						<image :src="exampleImageUrl2" style="flex-grow: 1;height: 100px; " mode=""></image>
					</view>
					
					<view class="flex-row" style="margin-top: 10px;">
						<view class="blockTextColor" style="flex-shrink: 0; font-size: 10px; font-weight: bold;">
							默认分享标题：
						</view>
						<view class="blockTextColor" style="font-size: 10px;">
							我在微群人脉发布了:{{dataModel.title}},邀请你进入
						</view>
					</view>
					<!-- 输入框 -->
					<view class="row-lineConter" style="margin-top: 5px;">
						<view class="blockTextColor" style="flex-shrink: 0;font-size: 10px; font-weight: bold;">
							自定义分享标题:
						</view>
						<view class="" style="margin-left: 10px; flex-grow: 1;">
							<input type="text"  placeholder="请输入分享标题(输入后使用输入的标题)" v-model="wechatMomentsTitle" />
						</view>
					</view>
				</view>
				
				<view @click="clickShareMoments()" class="column-levelCenter mainColor" style="font-size: 12px; margin-top: 10px;">
					<image :src="pengYouQuanImageUrl" style="width: 40px; height: 40px; margin-bottom: 8px;" mode=""></image>
					点击分享朋友圈
				</view>
				<!-- 分享好友  -->
				<view class="bordered-view"  style="margin-top: 15px;">
					<view class="blockTextColor" style="font-size: 15px; font-weight: bold;">
						示例分享好友聊天框效果
					</view>
					<view class="row-lineConter ">
						<image :src="haoyouShiLiUrl" style="flex-grow: 1;" mode=""></image>
					</view>
					
					<view class="flex-row" style="margin-top: 10px;">
						<view class="blockTextColor" style="flex-shrink: 0;  font-weight: bold;">
							默认分享标题：
						</view>
						<view class="blockTextColor" style="">
							我在微群人脉发布了:{{dataModel.title}},邀请你进入
						</view>
					</view>
					<!-- 输入框 -->
					<view class="row-lineConter" style="margin-top: 5px;">
						<view class="blockTextColor" style="flex-shrink: 0;font-size: 10px; font-weight: bold;">
							自定义分享标题:
						</view>
						<view class="" style="margin-left: 10px; flex-grow: 1;">
							<input type="text"  placeholder="请输入分享标题(输入后使用输入的标题)" v-model="shareFriendsTitle" />
						</view>
					</view>
				</view>
				
				<view  class="column-levelCenter mainColor" style="font-size: 12px; margin-top: 10px;">
					<image :src="weixinImageUrl" style="width: 40px; height: 40px; margin-bottom: 8px;" mode=""></image>
					点击分享好友
					<button open-type="share" class="shareFriends"></button>
				</view>
				
				<view class="" style="width: 100%; height: 100px;">
					
				</view>

			</view>
			<view @click="clickBack()" class="bottomView column-levelCenter">
				<view class="backBtn mainBgColor zsConter">
					返回
				</view>
			</view>
		</view>
		<!-- 分享进入 -->
		<view v-if="sharePush=='1'" class="" style=" padding: 20px;">
			
			<view class="shadowView flex-column" style="align-items: center;">
			
			
				<view class="blockTextColor" style="margin-top: 20rpx; font-size: 30rpx; font-weight: bold;">
					{{model.title}}
				</view>
				<!--  -->
				<view class="imageSuprView">
					<image class="groupImageView" :src="model.groupQRCodeImageUrl" mode="scaleToFill"></image>
					<view class="seeView column-center">
						<view @click="seeBtnClick()" class="seeBtn mainBgColor zsConter">
							点击识别二维码
						</view>
					</view>
				</view>
				<view class="blockTextColor" style="margin-top: 20rpx; font-size: 30rpx; font-weight: bold;">
					点击长按二维码识别进群
				</view>
			</view>
			
			<!-- 介绍 -->
			<view class="shadowView blockTextColor" style="margin-top: 20rpx; font-size: 30rpx;">
				<view style="font-size: 30rpx;font-weight: bold;">
					群介绍
				</view>
				<view style="margin-top: 20rpx;">
					{{model.groupDescription?? '暂无描述'}}
				</view>
			</view>
			
			
			<view class="" style=" margin-top: 15px;">
				<image  class="extensionImage" :src="extensionImageUrl" mode=""></image>
			</view>
		</view>
		
		<!-- 分享朋友圈弹窗 -->
		<uni-popup ref="popup" type="center" >
			<view  v-if="sharePush=='0'" class="flex-column" style="width: 100vw; height: 100vh;">
				<view class="" style="flex-grow: 1;">
					
						<image style="width: 40px; height: 40px;" :style='{marginLeft:(menuButtonInfo.left-10)+"px"}' src="../../static/youShangjiao.png" mode=""></image>
				<view class="" style="font-size: 20px; color: white; margin-left: 20px;">
					第一步：现在点击右上角
				</view>
				</view>
				<view class="">
					<view class="" style="font-size: 20px; color: white; margin-left: 20px;">
						第二步：点击分享至朋友圈
					</view>
					<image  class="bottomImage" src="../../static/fenxiangDiBu.jpg" mode="aspectFit"></image>
					
					<view class="column-levelCenter" style="margin-top: 15px;">
						<view @click="clickCancelSharing()" class="backBtn mainBgColor zsConter">
							取消分享
						</view>
					</view>
				</view>
			</view>
			<!-- 分享进入 -->
			<view  v-if="sharePush=='1'" class="column-center" style="margin: 0rpx 30rpx; align-items: center; border-radius: 8rpx; background-color: white; padding: 30rpx 40rpx; ">
				<view  class="mainColor">
					长按图片，识别二维码
				</view>
				<view class="flex-row blockTextColor" style="margin-top: 20rpx;" >
					添加创建发布者二维码，邀请进群 
				</view>
				
				<image  style="height: 700rpx;width: 500rpx;" :show-menu-by-longpress="true" @longpress="handleLongPress()"  :src="model.groupQRCodeImageUrl" mode=""></image>
				
				<view class="mainColor" style="margin-top: 30rpx;">
					长按图片，识别二维码
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//是否是分享进入
				sharePush:'0',
				explain: '发布成功后，可分享朋友圈或好友，增加曝光更好的推广群，分享出去的链接好友点击可直接查看二维码。',
				wechatMomentsTitle: '',
				shareFriendsTitle:'',
				// 朋友圈分享示例1
				exampleImageUrl1:'https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/分享示例1.jpg',
				exampleImageUrl2:'https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/分享朋友圈示例2.jpg',
				weixinImageUrl:'https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/weixin_icon.png',
				pengYouQuanImageUrl:'https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/朋友圈.png',
				//分享好友示例
				haoyouShiLiUrl:'https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/分享好友示例url.pic.jpg',
				menuButtonInfo:{},
				model:{//分享接收数据
					
				},
				dataModel:{},
				//底部推广url
				extensionImageUrl:'https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/分享页面推广图.jpg'
			}
		},
		onLoad(options) {
			if(options.sharePush == '1'){
				this.sharePush = '1'
				uni.setNavigationBarTitle({
					title:'邀请进群'
				})
				this.model= options
			} else {
				this.dataModel = this.$decodeJson(options.model);
				
				console.log('分享信息00===',options.model);
				
				 console.log('分享信息11===',this.dataModel);
			}
			 console.log('分享信息22===',options);
			
		},
		onReady() {
		    // 在页面准备好时获取胶囊按钮的位置信息
		    this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			
		    console.log('胶囊信息===',this.menuButtonInfo);
		  },
		onShareAppMessage(res) {
			var str = this.shareFriendsTitle==''? this.dataModel.title:this.shareFriendsTitle
			var title = '我在微群人脉发布了:'+str+'邀请你进入'
			let data = {
				title: title, //转发标题
				path: this.getShareStr(),
				imageUrl: this.dataModel.groupQRCodeImageUrl ,//转发图片
				success: function(res) {
				       console.log('分享成功', res);
					   uni.showToast({
					   	title:'分享成功'
					   })
				       // 分享成功的处理逻辑
				     },
			}
			return data
		},
		onShareTimeline() {
			var str = this.wechatMomentsTitle==''? this.dataModel.title:this.wechatMomentsTitle
			var title = '我在微群人脉发布了:'+str+'邀请你进入'
		    return {
		      // title: '拓展人脉神器，海量微群，名片，各行各业，免费加入发不',
			  title:title,
		      query: this.getShareStr(),
			  imageUrl: this.dataModel.groupQRCodeImageUrl,
			    success: function(res) {
			           console.log('分享成功', res);
					   uni.showToast({
					   	title:'分享成功'
					   })
			           // 分享成功的处理逻辑
			         },
			         fail: function(err) {
			           console.error('分享失败', err);
			           // 分享失败的处理逻辑
			         },
			         complete: function(res) {
			           console.log('分享结束', res);
			           // 分享结束的处理逻辑
			         }//转发图片
		    }
		  },
		methods: {
           clickShareMoments(){
			   this.$refs.popup.open('center')
		   },
		   clickCancelSharing(){
			  this.$refs.popup.close();
		   },
		   getShareStr(){
			 return  'pages/release-success-page/release-success-page?openId='+'sfddfdf'
			 + '&sharePush=1' + '&groupQRCodeImageUrl='+this.dataModel.groupQRCodeImageUrl + '&title='+this.dataModel.title +'&groupDescription='+this.dataModel.groupDescription
		   },
		   seeBtnClick(){
		   
		   		
		   	this.$refs.popup.open('center')
		   },
		   handleLongPress(){
			   	console.log('长按识别二维码===');
		   },
		   clickBack(){
			   uni.navigateBack();
		   }
		}
	}
</script>

<style lang="scss" scoped>
	.baseView{
		background-image: url('https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/topBgImage.png');
		background-repeat: no-repeat; /* 背景图片不重复 */
		  background-position: center; /* 背景图片居中显示 */
		  background-size: cover; /* 背景图片覆盖整个元素区域 */
	}
	.topView {
		color: rgb(224, 168, 99);
		font-size: 30rpx;
		border-radius: 8rpx;
		padding: 16rpx;
		background-color: rgba(224, 168, 99, 0.2);
		border: 1px solid rgb(224, 168, 99);
	}

	.bordered-view {
		border: 1px solid gainsboro;
		border-radius: 10px;
		padding: 10px;
	}

	.bottomView {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.backBtn {
		margin-bottom: 15px;
		width: 50%;
		color: white;
		font-size: 36rpx;
		height: 100rpx;
		border-radius: 50rpx;
		box-shadow: 0rpx 0rpx 20rpx rgb(52, 116, 246);

	}
	.bottomImage{
		width: 100%;
		height: 150px;
		border-radius: 8px;
	}
	.shareFriends{
		position: absolute;
		width: 100px;
		  height: 80px; /* 按钮高度 */
		  background-color: rgba(0, 0, 0,0); /* 按钮背景颜色 */
		
		  // border: none; /* 移除边框 */
		  border: 1px solid rgba(0, 0, 0,0);
		  box-shadow: none; /* 移除阴影 */
		
	opacity: 0; /* 完全不可见，不推荐 */
	}
	//
	.shadowView {
		padding: 30rpx;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx gainsboro;
	}
	
	
	.imageSuprView{
		width: 300rpx;
		height: 300rpx;
		position: relative;
		// background-color: deeppink;
	}
	.seeView{
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		// background-color: rgba(255, 255, 255, 0.7);
		
	}
	.seeBtn {
		color: white;
		font-size: 30rpx;
		font-weight: bold;
		height: 70rpx;
	}
	
	
	.groupImageView {
		width: 300rpx;
		height: 300rpx;
		border-radius: 8rpx;
	}
	.extensionImage{
		width: 100%;
		height: 150px;
		border-radius: 6px;
		overflow: hidden;
	}
	
</style>